<!--  -->
<template>
  <div>
        <v-title :text="'预警管理'"/>
    <el-row>
      <el-select v-model="value" filterable placeholder="选择预警规则">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="showAlert">查看</el-button>
    </el-row>
    <el-row>
      <el-col :span="22">
              <div v-for="(key, i) in alertData">
          <el-alert
            :title="key"
            type="warning"
            effect="dark"
            style="margin-top: 20px"
          >
          </el-alert>
        </div>
      </el-col>
    </el-row>
    <el-row id="details">
       <el-col :span="24">
         <RuleTable :rule_id="value" :cols="col_names" :topic="topic"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
import RuleTable from "@/components/Rule/RuleTable";
import Title from '@/components/Title/Title'
import Subtitle from '@/components/Title/Subtitle'

export default {
  data() {
    return {
      alertData: [],
      value: "",
      options: "",
      col_names: ["item_id", "hasDoc", "medicalFee", "tuitionFee", "disasterLevelIn3days", "epidemicIn3days", "industryIncr"],
      topic:"antipoor",
    };
  },

  methods: {
    showAlert() {
      console.log(this.value);
      this.$axios({
        url: "http://"+this.$config.server_ip+":5010/get_alerts_antipoor",
        method: "get",
        params: { id: this.value},
      }).then((res) => {
        console.log(res.data);
        this.alertData = res.data.alerts;
      });
    },
  },

  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.$axios({
      url: "http://"+this.$config.server_ip+":5004/get_rules",
      method: "get",
      params: { topic: "antipoor" },
    }).then((res) => {
      console.log(res.data);
      this.options = res.data;
    });
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},

  components: {
    RuleTable: RuleTable,
    "v-title": Title,
    "v-subtitle": Subtitle,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
#details {
  margin-top: 50px;
}

#alerts {
  margin-top: 50px;
}

.el-alert {
  margin-left: 10px;
}
</style>
